在前面提到 v-if 都是搭配 v-for 來做使用，但 v-if 也可以單獨的做使用
一樣先給 Vue 的架構和資料:

<script>
var app = new Vue({
  el: '#app',
  data: {
    isSuccess: true,
    showTemplate: true,
    link: 'a',
    loginType: 'username'
  },
  methods: {
    toggleLoginType: function () {
      return this.loginType = this.loginType === 'username' ? 'email' : 'username'
    }
  }
});
</script>

接著就來基本的使用 v-if，我們有兩個元件，分別可以跟著 input 的 checkbox 的勾選，來呈現不同的元件
當 isSuccess 的資料狀態為 true 就出現成功，為 false 就出現失敗，這時候 .alert 元素都綁著 v-if 的指令
判斷式就是 isSuccess 這個資料狀態，而 input 的 checkbox 綁著 isSuccess 隨著勾選會切換資料狀態

  <div class="alert alert-success" v-if="isSuccess">成功!</div>
  <div class="alert alert-danger" v-if="!isSuccess">失敗!</div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="isSuccess" v-model="isSuccess">
    <label class="form-check-label" for="isSuccess">啟用元素狀態</label>
  </div>

在 JS 裡面 if 判斷式常常搭配 else 來做使用，所以在 Vue 裡面當然也有 v-else 這個指令
所以在上面的程式碼，我們可以把﹝失敗的元件﹞改為 v-else，如下:

  <div class="alert alert-success" v-if="isSuccess">成功!</div>
  <div class="alert alert-danger" v-else>失敗!</div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="isSuccess" v-model="isSuccess">
    <label class="form-check-label" for="isSuccess">啟用元素狀態</label>
  </div>

兩種寫法都是一樣的

當然，我們也可以搭配 <template> 來做使用
舉一種情境，假設我們的表格資料，都要隨著 checkbox 的勾選來顯示或隱藏，這樣我們勢必就要在每個 <tr> 內下 v-if 的判斷式，假設有很多 <tr> 呢? 那是不是太累了?

  <table class="table">
    <thead>
      <th>編號</th>
      <th>姓名</th>
    </thead>
      <tr v-if="showTemplate">
        <td>1</td>
        <td>安妮</td>
      </tr>
      <tr v-if="showTemplate">
        <td>2</td>
        <td>小明</td>
      </tr>
  </table>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="showTemplate" v-model="showTemplate">
    <label class="form-check-label" for="showTemplate">啟用元素狀態</label>
  </div>

這時候就可以使用 <template> 了，使用之後寫法會如下
而 v-if 的指令只需要下在 <template> 內，而 <template> 是不會被輸出的

  <table class="table">
    <thead>
      <th>編號</th>
      <th>姓名</th>
    </thead>
    <template v-if="showTemplate">
      <tr>
        <td>1</td>
        <td>安妮</td>
      </tr>
      <tr>
        <td>2</td>
        <td>小明</td>
      </tr>
    </template>
  </table>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="showTemplate" v-model="showTemplate">
    <label class="form-check-label" for="showTemplate">啟用元素狀態</label>
  </div>

接下來，我們來做頁籤切換內容的功能，如下:

<ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link" href="#" :class="{'active': link == 'a'}" @click.prevent="link = 'a'">標題一</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" :class="{'active': link == 'b'}" @click.prevent="link = 'b'">標題二</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" :class="{'active': link == 'c'}" @click.prevent="link = 'c'">標題三</a>
    </li>
  </ul>
  <div class="content">
    <div v-if="link == 'a'">Ａ</div>
    <div v-else-if="link == 'b'">Ｂ</div>
    <div v-else-if="link == 'c'">Ｃ</div>
  </div>

比較不一樣的是多了 v-else-if 這個指令，這個就等於 JS 內的 else if，而顯示跟隱藏的方式，我們是採用 link 這個字串資料內容

再來講一講 v-if 跟 v-show 的差別，在第一個例子的時候我們可以改成 v-show

  <div class="alert alert-success" v-show="isSuccess">成功!</div>
  <div class="alert alert-danger" v-show="!isSuccess">失敗!</div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="isSuccess" v-model="isSuccess">
    <label class="form-check-label" for="isSuccess">啟用元素狀態</label>
  </div>

會發現結果是一樣的，但相較於 v-if
v-show 是採用 display 的屬性來做元素的隱藏跟顯示，亦即資料狀態為 true 時，display 為 block，資料狀態為 false 時，display 為 none
而 v-if 在資料狀態改變時，是採用移除 DOM 元素的方式
以上就是兩者的差異性